<template>
  <div class="app-container">
    <div id="map"></div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="门店名称" prop="storeName">
        <el-input
          v-model="queryParams.storeName"
          placeholder="请输入门店名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNumber">
        <el-input
          v-model="queryParams.phoneNumber"
          placeholder="请输入联系电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          v-hasPermi="['business:Chargeback:query']"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- <el-row :gutter="10">
      <el-col :span="1.5" v-for="(item, index) in state" :key="index">
        <el-button
          :type="item.key === selectedKey ? 'success' : 'primary'"
          plain
          style="margin-right: 10px"
          @click="handleButtonClick(item.key)"
        >
          {{ item.value }}
        </el-button>
      </el-col>
    </el-row> -->
    <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">
      </right-toolbar> -->
    <!-- <el-col  class="el-col--right">
        <el-button
          type="warning"
          plain
          @click="handleAdd"
        >开单</el-button>
      </el-col>
    </el-row> -->
    <el-table
      v-loading="loading"
      :data="storeList"
      max-height="650px"
      @selection-change="handleSelectionChange"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand">
        <template #default="scope">
          <div m="4" style="margin-left: 100px">
            <el-table :data="childrenList" :border="childBorder">
              <el-table-column label="项目名称" prop="itemName" width="120" />
              <el-table-column
                label="技师名称"
                prop="technicianName"
                width="120"
              />
              <el-table-column
                label="项目金额"
                prop="paymentMoney"
                width="200"
              />
              <el-table-column
                label="附加商品金额"
                prop="productMoney"
                width="120"
              />
              <!-- <el-table-column label="总价" prop="type" width="200" /> -->
            </el-table>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="订单号" align="center" prop="phoneNumber"  /> -->
      <el-table-column
        label="客户姓名"
        align="center"
        width="110px"
        prop="userName"
      />
      <el-table-column
        label="客户电话"
        align="center"
        width="110px"
        prop="phoneNumber"
      />
      <el-table-column
        label="所属区域"
        align="center"
        :show-overflow-tooltip="true"
        prop="regionName"
      />
      <el-table-column
        label="所属门店"
        align="center"
        :show-overflow-tooltip="true"
        prop="storeName"
        width="120"
      />
      <el-table-column
        label="包间费"
        align="center"
        prop="compartmentMoney"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.compartmentMoney === null
              ? "无"
              : scope.row.compartmentMoney
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center" prop="itemMoney" />
      <el-table-column label="优惠金额" align="center" prop="discountsMoney" />
      <el-table-column label="实付金额" align="center" prop="actuallyMoney" />
      <el-table-column
        label="使用会员卡"
        align="center"
        prop="isMember"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isMember == "1" ? "使用" : "未使用" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="使用储值卡"
        align="center"
        prop="isValue"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isValue == "1" ? "使用" : "未使用" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="订单来源"
        align="center"
        prop="orderSource"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isValue == "1" ? "线上" : "线下" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="订单状态"
        align="center"
        prop="orderStatus"
        width="120"
      >
        <template slot-scope="scope">
          {{scope.row.orderStatus == "1" ? "待服务" : scope.row.orderStatus == "2" ? "服务中" : scope.row.orderStatus == "3" ? "待评价" : scope.row.orderStatus == "4"? "已完成": "已退单"
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="支付状态"
        align="center"
        prop="isPayment"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isPayment == "1" ? "未支付" : "已支付" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="支付方式"
        align="center"
        prop="paymentType"
        width="120"
      >
        <template slot-scope="scope">
          {{
            scope.row.orderStatus == "1"
              ? "微信"
              : scope.row.orderStatus == "2"
              ? "支付宝"
              : scope.row.orderStatus == "3"
              ? "现金"
              : scope.row.orderStatus == "4"
              ? "银行卡"
              : scope.row.orderStatus == "5"
              ? "店铺储蓄卡"
              : "其他"
          }}
        </template>
      </el-table-column>
      <el-table-column label="理由" align="center" prop="remark" width="120" />
      <!-- <el-table-column label="预约结束时间" align="center" prop="subscribeEndTime" width="120"/> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['business:Chargeback:detail']"
            >详情</el-button
          >
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handReset(scope.row)"
            >支付</el-button
          > -->
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleorder(scope.row)"
            >退单</el-button
          > -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['business:Chargeback:del']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改门店对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="userName">
              <el-input
                v-model="form.userName"
                placeholder="请输入客户名称"
                style="width: 222px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户电话" prop="phoneNumber">
              <el-input
                v-model="form.phoneNumber"
                placeholder="请输入客户电话"
                style="width: 222px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="归属区域" prop="regionId">
              <el-select
                clearable
                v-model="form.regionId"
                @change="changeRegion"
              >
                <el-option
                  v-for="(item, index) of region"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属门店" prop="storeId">
              <el-select
                clearable
                v-model="form.storeId"
                @change="changePostione"
              >
                <el-option
                  v-for="(item, index) of postione"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="包间名称" prop="compartmentId">
              <el-select
                clearable
                v-model="form.compartmentId"
                @change="changecompartmentId"
              >
                <el-option
                  v-for="(item, index) of compartment"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包间费用" prop="compartmentMoney">
              <el-input
                v-model="form.compartmentMoney"
                placeholder="请输入包间费用"
                style="width: 222px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="使用会员卡" prop="isMember">
              <el-select
                clearable
                v-model="form.isMember"
                @change="changeisMember"
              >
                <el-option
                  v-for="(item, index) of List"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用储值卡" prop="isValue">
              <el-select
                clearable
                v-model="form.isValue"
                @change="changeisValue"
              >
                <el-option
                  v-for="(item, index) of List"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="选择项目">
              <el-button @click="openOrder">查看项目</el-button>
              <div
                v-for="(item, index) in zyOrderItemList"
                :key="index"
                class="zyOrderItemList"
              >
                <div>{{ item.itemName }}</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="平台优惠券" prop="platform">
              <el-select
                clearable
                v-model="form.platformZyUserCouponId"
                @change="changeplatform"
              >
                <el-option
                  v-for="(item, index) of platform"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="区域优惠券" prop="zone">
              <el-select
                clearable
                v-model="form.regionUserCouponId"
                @change="changezone"
              >
                <el-option
                  v-for="(item, index) of zone"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目优惠券" prop="project">
              <el-select
                clearable
                v-model="form.storeZyUserCouponId"
                @change="changeproject"
              >
                <el-option
                  v-for="(item, index) of project"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="订单金额" prop="itemMoney">
              <el-input
                v-model="form.itemMoney"
                placeholder="请输入订单金额"
                style="width: 222px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠金额" prop="discountsMoney">
              <el-input
                v-model="form.discountsMoney"
                placeholder="请输入优惠金额"
                style="width: 222px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实付金额" prop="actuallyMoney">
              <el-input
                v-model="form.actuallyMoney"
                placeholder="请输入实付金额"
                style="width: 222px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式" prop="paymentType">
              <el-select clearable v-model="form.paymentType">
                <el-option
                  v-for="(item, index) of money"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 套餐弹出框 -->
    <el-dialog
      :title="'添加项目'"
      :visible.sync="order"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="title">
        <div
          v-for="(item, index) in zyOrderItemList"
          :class="{ 'title-item': true, selected: selectedIndex === index }"
          :key="index"
          class="title-item"
          @click="selectProject(index)"
        >
          套餐{{ index + 1 }}
        </div>
      </div>
      <div
        v-for="(item, index) in zyOrderItemList"
        :key="index"
        v-if="selectedIndex === index"
      >
        <el-form ref="form123" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="选择分类" prop="id">
                <el-select clearable v-model="item.id" @change="changetypeName">
                  <el-option
                    v-for="(item, index) of Downlist"
                    :key="index"
                    :label="item.value"
                    :value="item.key"
                    >{{ item.value }}</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择项目" prop="itemId">
                <el-select
                  clearable
                  v-model="item.itemId"
                  @change="changeitemId"
                >
                  <el-option
                    v-for="(item, index) of store"
                    :key="index"
                    :label="item.value"
                    :value="item.key"
                    >{{ item.value }}</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目金额" prop="paymentMoney">
                <el-input
                  v-model="item.paymentMoney"
                  placeholder="请输入项目金额"
                  style="width: 222px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择项目">
                <el-button @click="opengoods">选择附加商品</el-button>
                <div v-for="(item, index) in selectList" :key="index">
                  {{ item.productName }}
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="选择技师" prop="technicianId">
                <el-select
                  clearable
                  v-model="item.technicianId"
                  @change="changetechnicianId"
                >
                  <el-option
                    v-for="(item, index) of jishi"
                    :key="index"
                    :label="item.value"
                    :value="item.key"
                    >{{ item.value }}</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择项目">
                <el-button @click="opengoods">选择附加商品</el-button>
                <div v-for="(item, index) in selectList" :key="index">
                  {{ item.productName }}
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="预约时间" prop="paymentMoney">
                  <el-time-select
                      placeholder="预约开始时间"
                      v-model="item.subscribeStartTime"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'
                      }">
                    </el-time-select>
                    ~
                    <el-time-select
                      placeholder="预约结束时间"
                      v-model="item.subscribeEndTime"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30',
                        minTime: item.subscribeStartTime
                      }">
                    </el-time-select>
                </el-form-item> -->
        </el-form>
      </div>
      <el-button @click="addHobby">添加套餐</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOrder">确 定</el-button>
        <el-button @click="cancelOrder">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="'添加附加商品'"
      :visible.sync="goods"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="title">
        <div
          v-for="(item, index) in zyOrderProductList"
          :class="{ 'title-item': true, selected: Index === index }"
          :key="index"
          class="title-item"
          @click="selectGood(index)"
        >
          商品{{ index + 1 }}
        </div>
      </div>
      <div
        v-for="(item, index) in zyOrderProductList"
        :key="index"
        v-if="Index === index"
      >
        <el-form ref="form123" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品分类" prop="productId">
                <el-select
                  clearable
                  v-model="item.productId"
                  @change="changeproductId"
                >
                  <el-option
                    v-for="(item, index) of good"
                    :key="index"
                    :label="item.value"
                    :value="item.key"
                    >{{ item.value }}</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品价格" prop="originalPrice">
                <el-input
                  v-model="item.originalPrice"
                  placeholder="请输入商品价格"
                  style="width: 222px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="商品价格" prop="originalPrice">
                    <el-select clearable v-model="item.originalPrice" >
                    <el-option v-for="(item,index) of store" :key="index" :label="item.value" :value="item.key">{{item.value}}</el-option>
                    </el-select>
                </el-form-item> -->
          <el-form-item label="数量" prop="productNum">
            <el-input
              v-model="item.productNum"
              placeholder="请输入数量"
              style="width: 222px"
            />
          </el-form-item>
        </el-form>
      </div>
      <el-button @click="addGoods">添加附加商品</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitGood">确 定</el-button>
        <el-button @click="cancelGood">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="title"
      :visible.sync="remark"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="理由" prop="userName">
          <el-input v-model="remarked" placeholder="请输入理由" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitremark">确 定</el-button>
        <el-button @click="remark = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listchargeback,
  getorder,
  deliteorder,
  listMemberRegion,
  listpullDownlist,
  listorderList,
  listorderPayment,
  liststorelist,
  listMemberStore,
  listpullDown,
  listmemberjudgment,
  listvaluejudgment,
  listcompartment,
  listtechnicianList,
} from "@/api/system/orderList/Chargeback";

export default {
  name: "Store",
  data() {
    return {
      remarkId: null,
      isMember: null,
      memberType: null,
      selectedIndex: 0, // 保存当前选中的项目索引
      Index: 0,
      map: null,
      local: null,
      mk: null,
      latitude: "",
      longitude: "",
      keyWords: "",
      result: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 门店表格数据
      storeList: [],
      orderStatus: 1,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      order: false,
      goods: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeName: null,
        phoneNumber: null,
        province: null,
        provinceString: null,
        city: null,
        cityString: null,
        county: null,
        countyString: null,
        detail: null,
        longitude: null,
        latitude: null,
        intro: null,
        images: null,
        status: null,
        isInitiate: null,
        openingTime: null,
        closingTime: null,
      },
      childrenList: [],
      // 表单参数
      form: {
        zyOrderItemList: [],
      },
      zyOrderItemList: [{ id: "", itemId: "", paymentMoney: "" }],
      zyOrderProductList: [
        { productId: "", originalPrice: "", productNum: "" },
      ],
      remarked: "",
      remark: false,
      // 表单校验
      rules: {},
      options: [],
      List: [
        {
          key: 1,
          value: "是",
        },
        {
          key: 2,
          value: "否",
        },
      ],
      pay: [
        { key: 1, value: "未支付" },
        { key: 2, value: "已支付" },
      ],
      state: [
        { key: 1, value: "待服务" },
        { key: 2, value: "服务中" },
        { key: 3, value: "待评价" },
        { key: 4, value: "已完成" },
        { key: 5, value: "已退单" },
      ],
      money: [
        { key: 1, value: "微信" },
        { key: 2, value: "支付宝" },
        { key: 3, value: "现金" },
        { key: 4, value: "银行卡" },
        { key: 5, value: "店铺储蓄卡" },
        { key: 6, value: "其他" },
      ],
      platform: [],
      zone: [],
      project: [],
      region: [],
      Downlist: [],
      store: [],
      postione: [],
      good: [],
      compartment: [],
      jishi: [],
      indexList: [],
      selectList: [],
      selectedKey: null,
    };
  },
  created() {
    this.getList();
    this.listregion();
    this.listpullDownlist();
    listMemberRegion().then((res) => {
      console.log(res, 332221111);
      this.region = res.data.map((rItem) => {
        return {
          key: rItem.id,
          value: rItem.regionName,
        };
      });
    });
    liststorelist().then((res) => {
      console.log(res, 6666);
      this.postione = res.rows.map((rItem) => {
        return {
          key: rItem.storeId,
          value: rItem.storeName,
          // price: rItem.price,
          // member: rItem.member,
        };
      });
    });
  },
  methods: {
    selectProject(index) {
      this.selectedIndex = index;
      this.selectList = this.indexList[this.selectedIndex];
      // this.zyOrderProductList=this.selectList
      console.log(this.indexList, "商品数组");
      console.log(this.selectList, "选择的商品数组");
      console.log(this.selectedIndex + 1, "第几个套餐");
      const titleItems = document.querySelectorAll(".title-item");
      titleItems.forEach((item, i) => {
        if (i === index) {
          item.classList.add("selected"); // 添加选中样式类名
        } else {
          item.classList.remove("selected"); // 移除其他样式类名
        }
      });
    },
    selectGood(index) {
      this.Index = index;
      console.log(this.Index + 1, "第几个附加商品");
      const titleItems = document.querySelectorAll(".title-item");
      titleItems.forEach((item, i) => {
        if (i === index) {
          item.classList.add("selected"); // 添加选中样式类名
        } else {
          item.classList.remove("selected"); // 移除其他样式类名
        }
      });
    },
    listpullDownlist() {
      //项目分类
      listpullDownlist().then((res) => {
        this.Downlist = res.data.map((rItem) => {
          return {
            key: rItem.id,
            value: rItem.typeName,
          };
        });
      });
    },
    changetypeName(value) {
      const selectedOption = this.Downlist.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      this.zyOrderItemList[this.selectedIndex].typeName = selectedValue;
      liststorelist({ typeId: value }).then((res) => {
        console.log(res, 666);
        this.store = res.rows.map((rItem) => {
          return {
            key: rItem.id,
            value: rItem.itemName,
            price: rItem.price,
            member: rItem.member,
          };
        });
      });
    },
    changeitemId(value) {
      const selectedOption = this.store.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      const selectedprice = selectedOption.price;
      const selectedmember = selectedOption.member;
      this.zyOrderItemList[this.selectedIndex].itemName = selectedValue;
      console.log(this.isMember, "是否使用会员");
      console.log(this.memberType, "该店铺是什么优惠");
      if (this.isMember == 1) {
        if (this.memberType == 1) {
          console.log("该店铺是折会员价");
          this.zyOrderItemList[this.selectedIndex].paymentMoney =
            selectedmember;
        } else if (this.memberType == 2) {
          console.log("该店铺是折扣用原价");
          this.zyOrderItemList[this.selectedIndex].paymentMoney = selectedprice;
        }
      } else if (this.isMember == 2) {
        console.log("没有使用会员");
        this.zyOrderItemList[this.selectedIndex].paymentMoney = selectedprice;
      }
      listtechnicianList({ itemStoreId: value }).then((res) => {
        console.log(res, 6666);
        this.jishi = res.data.map((rItem) => {
          return {
            key: rItem.id,
            value: rItem.name,
          };
        });
      });
    },
    changetechnicianId(value) {
      const selectedOption = this.jishi.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      this.zyOrderItemList[this.selectedIndex].technicianName = selectedValue;
    },
    changeisMember(value) {
      console.log(value, "是否使用会员卡");
      this.isMember = value;
      if (value == 1) {
        listmemberjudgment({
          phoneNumber: this.form.phoneNumber,
          regionId: this.form.regionId,
        }).then((res) => {
          console.log(res);
        });
      }
    },
    changeisValue(value) {
      console.log(value);
      if (value == 1) {
        listvaluejudgment({
          phoneNumber: this.form.phoneNumber,
          regionId: this.form.regionId,
          consumption: this.form.itemMoney,
        }).then((res) => {
          console.log(res);
        });
      }
    },
    openOrder() {
      this.order = true;
    },
    opengoods() {
      this.goods = true;
    },
    addHobby() {
      // this.form.zyOrderItemList.push({name:'',description:''});
      this.zyOrderItemList.push({});
      console.log(this.form.zyOrderItemList, 3333);
    },
    addGoods() {
      this.zyOrderProductList.push({});
      console.log(this.form.zyOrderItemList, 3333);
    },
    listregion() {
      listMemberRegion().then((res) => {
        this.region = res.data.map((rItem) => {
          return {
            key: rItem.id,
            value: rItem.regionName,
          };
        });
      });
    },
    changeRegion(value) {
      const selectedOption = this.region.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      console.log(`Selected Key: ${selectedKey}`);
      console.log(`Selected Value: ${selectedValue}`);
      this.form.regionName = selectedValue;
      console.log(this.form.regionName, 444);
      listMemberStore({ regionId: value }).then((res) => {
        this.postione = res.data.map((rItem) => {
          return {
            key: rItem.id,
            value: rItem.storeName,
            memberType: rItem.memberType,
          };
        });
      });
    },
    changePostione(value) {
      const selectedOption = this.postione.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      const selectedmemberType = selectedOption.memberType;
      this.memberType = selectedmemberType;
      console.log(this.memberType, "该店铺是什么优惠 ");
      console.log(selectedOption, "选择的门店");
      this.form.storeName = selectedValue;
      listpullDown({ storeId: value }).then((res) => {
        this.good = res.data.map((rItem) => {
          return {
            key: rItem.id,
            value: rItem.productName,
            royalty: rItem.royalty,
            originalPrice: rItem.originalPrice,
          };
        });
      });
      listcompartment({ storeId: value }).then((res) => {
        console.log(res, 777);
        this.compartment = res.rows.map((rItem) => {
          return {
            key: rItem.id,
            value: rItem.compartmentName,
            price: rItem.price,
            bedNumber: rItem.bedNumber,
          };
        });
      });
    },
    changecompartmentId(value) {
      const selectedOption = this.compartment.find(
        (item) => item.key === value
      );
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      const selectedprice = selectedOption.price;
      const selectedbedNumber = selectedOption.bedNumber;
      console.log(selectedOption, 8888);
      this.form.compartmentName = selectedValue;
      this.form.compartmentMoney = selectedprice * selectedbedNumber;
    },
    changeproductId(value) {
      const selectedOption = this.good.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      const selectedroyalty = selectedOption.royalty;
      const selectedoriginalPrice = selectedOption.originalPrice;
      console.log(`Selected Key: ${selectedKey}`);
      console.log(`Selected Value: ${selectedValue}`);
      this.zyOrderProductList[this.Index].originalPrice = selectedoriginalPrice;
      this.zyOrderProductList[this.Index].productName = selectedValue;
      this.zyOrderProductList[this.Index].royalty = selectedroyalty;
    },
    changeplatform(value) {
      const selectedOption = this.platform.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      const selecteddiscountAmount = selectedOption.discountAmount;
      this.form.platformdiscountAmount = parseFloat(selecteddiscountAmount);
      console.log(this.form, 1);
      // 初始化 discountsMoney 为 0
      this.form.discountsMoney = 0;

      // 判断 platformdiscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.platformdiscountAmount) {
        this.form.discountsMoney += this.form.platformdiscountAmount;
      }

      // 判断 zonediscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.zonediscountAmount) {
        this.form.discountsMoney += this.form.zonediscountAmount;
      }

      // 判断 projectdiscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.projectdiscountAmount) {
        this.form.discountsMoney += this.form.projectdiscountAmount;
      }
    },
    changezone(value) {
      const selectedOption = this.zone.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      const selecteddiscountAmount = selectedOption.discountAmount;
      this.form.zonediscountAmount = parseFloat(selecteddiscountAmount);
      console.log(this.form, 2);
      // 初始化 discountsMoney 为 0
      this.form.discountsMoney = 0;

      // 判断 platformdiscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.platformdiscountAmount) {
        this.form.discountsMoney += this.form.platformdiscountAmount;
      }

      // 判断 zonediscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.zonediscountAmount) {
        this.form.discountsMoney += this.form.zonediscountAmount;
      }

      // 判断 projectdiscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.projectdiscountAmount) {
        this.form.discountsMoney += this.form.projectdiscountAmount;
      }
    },
    changeproject(value) {
      const selectedOption = this.project.find((item) => item.key === value);
      const selectedKey = selectedOption.key;
      const selectedValue = selectedOption.value;
      const selecteddiscountAmount = selectedOption.discountAmount;
      this.form.projectdiscountAmount = parseFloat(selecteddiscountAmount);
      console.log(this.form, 3);
      // 初始化 discountsMoney 为 0
      this.form.discountsMoney = 0;

      // 判断 platformdiscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.platformdiscountAmount) {
        this.form.discountsMoney += this.form.platformdiscountAmount;
      }

      // 判断 zonediscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.zonediscountAmount) {
        this.form.discountsMoney += this.form.zonediscountAmount;
      }

      // 判断 projectdiscountAmount 字段是否存在并累加到 discountsMoney
      if (this.form.projectdiscountAmount) {
        this.form.discountsMoney += this.form.projectdiscountAmount;
      }
      this.form.actuallyMoney = this.form.itemMoney - this.form.discountsMoney;
    },
    cancelGood() {
      this.goods = false;
    },
    cancelOrder() {
      this.order = false;
    },

    handleExpandChange(row) {
      // 获取展开行的ID
      const id = row.id;
      listorderList({ orderId: row.id }).then((res) => {
        console.log(res);
        this.childrenList = res.rows;
      });
      console.log(id, 123);
    },
    /** 查询门店列表 */
    getList() {
      this.loading = true;

      listchargeback(this.queryParams).then((response) => {
        this.storeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        storeName: null,
        phoneNumber: null,
        province: null,
        provinceString: null,
        city: null,
        cityString: null,
        county: null,
        countyString: null,
        detail: null,
        longitude: null,
        latitude: null,
        intro: null,
        images: null,
        status: null,
        isInitiate: null,
        openingTime: null,
        closingTime: null,
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加门店";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getorder(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改订单";
      });
    },
    //商品提交
    submitGood() {
      this.zyOrderProductList.forEach((item) => {
        const originalPrice = parseFloat(item.originalPrice);
        const productNum = parseFloat(item.productNum);

        if (isNaN(originalPrice)) {
          item.originalPrice = 0;
        }

        if (isNaN(productNum)) {
          item.productNum = 0;
        }

        const sum = originalPrice * productNum;
        item.sum = isNaN(sum) ? 0 : sum;
      });
      this.zyOrderItemList[this.selectedIndex].zyOrderProductList =
        this.zyOrderProductList;
      this.indexList.push(this.zyOrderProductList);
      this.zyOrderProductList = [
        { productId: "", originalPrice: "", productNum: "" },
      ];
      this.goods = false;
      console.log(this.indexList, "回显数组");
      console.log(this.zyOrderProductList, "商品数组");
    },
    //项目提交
    submitOrder() {
      if (this.zyOrderItemList.zyOrderProductList) {
        this.zyOrderItemList.forEach((item) => {
          const sum = item.zyOrderProductList.reduce(
            (total, product) => total + parseInt(product.sum),
            0
          );
          item.sum = sum; // 将加和放回原对象中
        });
      } else {
        this.zyOrderItemList.forEach((item) => {
          item.sum = 0; // 如果 zyOrderProductList 不存在，将 sum 属性赋值为 0
        });
      }

      this.form.zyOrderItemList = this.zyOrderItemList;
      const zyOrderItemList = this.form.zyOrderItemList;
      // 使用 reduce 方法计算 sum 和 paymentMoney 字段之和
      const { sum, paymentMoney } = zyOrderItemList.reduce(
        (total, item) => {
          total.sum += parseInt(item.sum);
          total.paymentMoney += parseFloat(item.paymentMoney); // 转换为数字类型
          return total;
        },
        { sum: 0, paymentMoney: 0 }
      );
      // 判断 compartmentMoney 是否为 null，如果是则设置为 0

      if (!this.form.compartmentMoney) {
        this.form.compartmentMoney = 0;
      }
      console.log(sum, paymentMoney, 4444);
      console.log(this.form.compartmentMoney, 5555);
      // 计算 itemMoney
      this.form.itemMoney = sum + paymentMoney + this.form.compartmentMoney;

      // 假设 this.form 中有一个 zyOrderItemList 数组，每个对象都有 sum 和 paymentMoney 字段
      // 将计算得出的结果相加得到总和，然后存储在 this.form 中的 sum 字段中
      console.log(this.zyOrderItemList, "项目数组");
      console.log(this.form, 777);
      const itemIds = this.zyOrderItemList.map((item) => item.itemId);
      const itemIdsString = itemIds.join(",");
      listuserCoupon({
        phonenumber: this.form.phoneNumber,
        couponTypeName: "平台券",
      }).then((res) => {
        console.log(res, 777);
        this.platform = res.data.map((rItem) => {
          return {
            key: rItem.myCouponId,
            value: rItem.name,
            fullAmount: rItem.fullAmount,
            discountAmount: rItem.discountAmount,
          };
        });
      });
      listuserCoupon({
        phonenumber: this.form.phoneNumber,
        couponTypeName: "区域券",
      }).then((res) => {
        console.log(res, 8888);
        this.zone = res.data.map((rItem) => {
          return {
            key: rItem.myCouponId,
            value: rItem.name,
            fullAmount: rItem.fullAmount,
            discountAmount: rItem.discountAmount,
          };
        });
      });
      listuserCoupon({
        phonenumber: this.form.phoneNumber,
        projectIds: itemIdsString,
        couponTypeName: "项目券",
      }).then((res) => {
        console.log(res, 999);
        this.project = res.data.map((rItem) => {
          return {
            key: rItem.myCouponId,
            value: rItem.name,
            fullAmount: rItem.fullAmount,
            discountAmount: rItem.discountAmount,
          };
        });
      });
      this.order = false;
    },
    handReset(row) {
      const ids = row.id;
      const money = row.actuallyMoney;
      console.log(ids, 999);
      this.$modal
        .confirm("是否确认该订单金额为" + money + "的项支付成功？")
        .then(function () {
          return listorderPayment({ id: ids });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("支付成功");
        })
        .catch(() => {});
    },
    handleorder(row) {
      this.remarkId = row.id;
      this.title = "退单";
      this.remark = true;
    },
    submitremark() {
      updateorder({ id: this.remarkId, remark: this.remarked }).then((res) => {
        if (res.code == 200) {
          this.remark = false;
          this.$modal.msgSuccess("退单成功");
        }
      });

      //  this.$modal.confirm('是否确认订单编号为"' + this.remarkId + '"的数据项退单？').then(function() {
      //     return updateorder({id: this.remarkId,remark:this.remarked});
      //   }).then(() => {
      //     this.getList();
      //
      //   }).catch(() => {});
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除编号为"' + ids + '"的数据项？')
        .then(function () {
          return deliteorder(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/store/export",
        {
          ...this.queryParams,
        },
        `store_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style>
.el-col--right {
  display: flex;
  justify-content: flex-end;
  margin-right: 0px;
}
</style>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.title {
  display: flex;

  /* background-color: red; */
  /* width:50px; */
}
.title-item {
  width: 80px;
  height: 30px;
  margin: 8px;
  text-align: center;
  line-height: 30px;
  background-color: grey;
  border: 1px solid #fff;
  border-radius: 6px;
  color: #fff;
}
.selected {
  background-color: rgba(42, 130, 228, 1);
}
.project {
  /* width:300px; */
  height: 200px;
  background-color: grey;
  /* padding:16px */
}
.zyOrderItemList {
  /* background-color:red; */
  /* display:flex; */
}
</style>